<template>
  <div class="screen-tools">
    <div class="screen-tools-btn"
         :class="{active: currKey === item.key}"
         v-for="item in arr"
         :key="item.key"
         @click="onClick(item)">
      <i :class="item.icon"></i><span>{{ item.label }}</span>
    </div>

    <transition name="slide-up">
      <div v-if="visible" class="screen-tools-popup" :class="{inline: currKey === 4}">

        <div class="map-wrap" v-if="currKey === 4">
          <span class="map-wrap-item" :class="{selected: mapType === 1}" @click="onMapClick(1)">电子地图</span>
          <span class="map-wrap-item" :class="{selected: mapType === 2}" @click="onMapClick(2)">影像地图</span>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'screen-tool',
  data() {
    return {
      arr: [
        {label: '拾取', icon: 'el-icon-aim', key: 1},
        {label: '图例', icon: 'el-icon-menu', key: 2},
        {label: '工具', icon: 'el-icon-s-tools', key: 3},
        {label: '电子地图', icon: 'el-icon-map-location', key: 4}
      ],
      visible: false,
      currKey: '',
      mapType: 1
    }
  },
  methods: {
    onClick(item) {
      if(this.currKey === item.key) {
        this.currKey = ''
        this.visible = false
      } else {
        this.currKey = item.key
        this.visible = true
      }
      this.$emit('tool-click', this.currKey)
    },
    onMapClick(key) {
      this.mapType = key
      this.$emit('map-change', key)
    }
  }
}
</script>

<style lang="scss" scoped>
.screen-tools {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: flex;

  &-btn {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #093180;
    padding: 0 12px;
    cursor: pointer;

    &+.screen-tools-btn {
      margin-left: 8px;
    }

    i {
      margin-right: 5px;
    }

    &:hover, &:active, &.active {
      color: #1af2c4;
    }
  }

  &-popup {
    background-color: #093180;
    position: absolute;
    padding-left: 10px;
    bottom: 45px;
    width: 100%;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);

    &.inline {
      width: auto;
      right: 0;
      padding: 0;


    }
  }
}

.map-wrap {
  padding: 15px 10px;

  &-item {
    padding-bottom: 10px;
    cursor: pointer;

    &+.map-wrap-item {
      margin-left: 5px;
    }

    &.selected {
      color: #1af2c4;
      border-bottom: 2px solid;
    }
  }
}

.slide-up-enter-active {
  animation: slide-up-in 0.3s;
}

.slide-up-leave-active {
  animation: slide-up-out 0.3s;
}

@keyframes slide-up-in {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-up-out {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}
</style>
